<template>
  <div class="banner">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in banners" :key="item.id">
        <img :src="item.banner_cover_url" alt="">
      </van-swipe-item>

    </van-swipe>
  </div>
</template>
<script>
import { banner} from '../api/index'
export default {
  data() {
    return {
      banners: [
        {
          "banner_cover_url": "http://imagev2.xmcdn.com/group86/M04/95/77/wKg5Jl7olMnThemcAAF1uXzr_cI584.jpg",
          "id": 0,
        },
        {
          "banner_cover_url": "	https://imagev2.xmcdn.com/storages/f885-audiofreehighqps/D5/EC/GArMqOoKkJCrAAHrOAL_Onpv.jpg",
          "id": 1,
        },
        {
          "banner_cover_url": "https://imagev2.xmcdn.com/storages/5047-audiofreehighqps/4C/39/GKwRIasJ6R7MAAHuKwLDQvny.jpg",
          "id": 2,
        },
        {
          "banner_cover_url": "https://imagev2.xmcdn.com/storages/c2f3-audiofreehighqps/A3/6B/GMCoOSEKBSKAAAvZQgLMxFrU.png",
          "id": 3,
        },
        {
          "banner_cover_url": "	https://imagev2.xmcdn.com/storages/f08b-audiofreehighqps/83/0B/GKwRIUEKRwusAAENfgLjsJ2v.jpg",
          "id": 4,
        },
        {
          "banner_cover_url": "	https://imagev2.xmcdn.com/storages/89b5-audiofreehighqps/0A/32/GKwRIJEJ8r4KAAEyYQLGhCVS.jpg",
          "id": 5,
        },
      ]
    }
  },

}
</script>
<style lang="less">
.banner {
  // margin-top: 10px;

  img {
    width: 100%;

  }
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}
</style>